<template>
  <view class="container">
    <!-- 1、心率简介 -->
    <uni-section class="heart-rate-section" title="心率简介" type="line">
      <uni-card :is-shadow="false" class="heart-rate-card">
        <text class="uni-cal">
          心率是指心脏每分钟跳动的次数。正常成人的心率通常在60到100次/分钟之间。过高或过低的心率可能意味着潜在的健康问题，需要及时检查。
        </text>

        <!-- 输入框和计算按钮 -->
        <view class="input-area">
          <view class="input-group">
            <text class="label">请输入心率 (次/分钟):</text>
            <input v-model="heartRate" type="number" placeholder="请输入心率" />
          </view>

          <!-- 结果展示区 -->
          <view class="result-area">
            <text class="result-label">您的心率:</text>
            <text class="result-value">心率: {{ heartRate }} 次/分钟</text>
            <text class="result-status">-{{ status }}</text>
            <text class="health-advice">{{ healthAdvice }}</text>
          </view>
          <button @click="evaluateHeartRate" type="primary">评估心率</button>
        </view>
      </uni-card>
    </uni-section>
  </view>
</template>

<script>
export default {
  data() {
    return {
      heartRate: '', // 心率值
      status: '', // 心率状态（正常、偏低、偏高等）
      healthAdvice: '' // 健康建议
    };
  },
  methods: {
    // 评估心率值并给出状态和健康建议
    evaluateHeartRate() {
      if (this.heartRate !== '') {
        this.setStatusAndAdvice(this.heartRate);
      } else {
        this.status = '请输入心率值';
        this.healthAdvice = '';
      }
    },
    // 根据心率值设置状态和健康建议
    setStatusAndAdvice(heartRate) {
      if (heartRate >= 60 && heartRate <= 100) {
        this.status = '正常';
        this.healthAdvice = '您的心率正常，保持良好的作息和饮食习惯，确保身体健康。';
      } else if (heartRate < 60) {
        this.status = '偏低';
        this.healthAdvice = '您的心率偏低，可能是由于过度锻炼或某些疾病引起，建议咨询医生。';
      } else if (heartRate > 100 && heartRate <= 120) {
        this.status = '稍高';
        this.healthAdvice = '您的心率稍高，建议减少压力和过度运动，保持心情愉快。';
      } else if (heartRate > 120) {
        this.status = '偏高';
        this.healthAdvice = '您的心率偏高，可能是身体处于压力或其他健康问题，建议尽快就医。';
      }
    }
  }
};
</script>

<style lang="scss">
  .container {
    padding: 20rpx;

    .heart-rate-section {
      .heart-rate-card {
        .input-area {
          margin-top: 20rpx;
        }

        .input-area {
          .input-group {
            display: flex;
            margin: 10rpx 0;
          }
        }
      }

      .result-area {
        margin-top: 20rpx;
        .result-label {
          font-size: 16px;
        }
        .result-value {
          font-size: 18px;
          font-weight: bold;
        }
        .result-status {
          color: #ff4d4f;
          font-size: 14px;
        }
        .health-advice {
          font-size: 14px;
          color: #0084ff;
          margin-top: 10rpx;
        }
      }
    }
  }
</style>
